<template>
    <div class="container-box">
        <div class="charts-date-type">
            <date-picker @getData="getData" :dateDataType="dateDataType" :date_interval="date_interval" :now_day="false" size="small"></date-picker>
        </div>
        <div class="charts-container">
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[0].label}}</div>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr" :showParticleSize="showParticleSize" container="c1" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[1].label}}</div>
                        </div>
                        <div class="charts-content charts-bar">
                            <charts-bar :dataArr="dataArr2" :showParticleSize="showParticleSize" container="c2" :hasType="false"></charts-bar>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[2].label}}</div>
                        </div>
                        <div class="charts-content charts-bar">
                            <charts-bar :dataArr="dataArr3" :showParticleSize="showParticleSize" container="c3" :hasType="false"></charts-bar>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[3].label}}</div>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr4" :showParticleSize="showParticleSize" container="c4" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[4].label}}</div>
                            <router-link class="charts-more" v-if="admin_is_super == 1 || admin_id == 190" :to="{path: 'registry-access-details'/*, query: {begin: date_interval[0], end: date_interval[1]}*/}">
                                详情
                            </router-link>
                        </div>
                        <div class="charts-content">
                            <charts :dataArr="dataArr5" :showParticleSize="showParticleSize" container="c5" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">{{dataTypeArr[5].label}}</div>
                        </div>
                        <div class="charts-content" style="margin-top: -10px;">
                            <charts-bar :dataArr="dataArr6" :showParticleSize="showParticleSize" container="c6" :hasType="false"></charts-bar>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import datePicker from '../datePicker.vue';
import charts from '../charts.vue';
import chartsBar from '../charts-bar.vue';
import { getChartMin, compare } from '@/common/js/util.js'
// import '@/common/scss/charts-public.scss'
export default {
    data() {
        return {
            dataTypeArr: [
                {label: '访问次数', value: 4, valueSuffix: ' 次'},
                {label: '累计次数', value: 5, valueSuffix: ' 次'},
                {label: '访问人数', value: 1, valueSuffix: ' 人'},
                {label: '累计人数', value: 2, valueSuffix: ' 人'},
                {label: '注册人数', value: 3, valueSuffix: ' 人'},
                {label: '累计注册', value: 6, valueSuffix: ' 人'}
            ],
            showParticleSize: false,   // 粒度控件
            searchContent: {
                data_type: 4,  // 类型，默认访问次数
            },
            dataArr: {
                series:  []
            },
            dataArr2: {
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 5,
                },
                plotOptions: {
                    column: {
                        borderRadius: 2,
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#FCC0F8'],
                                [1, '#4293F4']
                            ]
                        }
                    }
                },
                init: true, // true 表示每次加载都重新初始化
                series: []
            },
            dataArr3: {
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 5,
                },
                plotOptions: {
                    column: {
                        borderRadius: 2,
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, '#65E3C3'],
                                [1, '#4293F4']
                            ],
                        },
                    }
                },
                init: true,
                series: []
            },
            dataArr4: {
                series:  []
            },
            dataArr5: {
                series:  []
            },
            dataArr6: {
                type: 'column',
                xAxis: {
                    lineWidth: 1,
                },
                yAxis: {
                    lineWidth: 0,
                    tickWidth: 0,
                    gridLineWidth: 1,
                    tickAmount: 5,
                },
                //formatter(total) {
                //    return formatterNumber(this.y, 10000, 2, true) + '人' + ' (' + (total > 0 && (this.y * 100 / total).toFixed(2) || '0') + '%)'; // 格式化
                //},
                // labelFormat: 'MM-DD',
                init: true,
                series: []
            },
            dateDataType: null,
            date_interval: [],
            admin_is_super: 0,
            admin_id: 0
        }
    },
    components: { datePicker, charts, chartsBar },
    beforeRouteEnter (to, from, next) {
        if(to.params.data_type) {

        }
        next();
    },
    created() {
        this.admin_is_super = this.$store.getters["user_info"].admin_is_super
        this.admin_id = this.$store.getters["user_info"].admin_id
        const data_type = this.$route.params.data_type;
        if(data_type) {
            this.searchContent.data_type = data_type;
            this.dateInterval = this.$route.params.dateInterval;
        }
    },
    methods: {
        handleChange() {
            this.getData()
        },
        getData(dateInterval = null) {

            // 请求参数
            let datas = {};
            if(this.dateInterval) {
                dateInterval = this.dateInterval;

                // 更新日期选中值 
                const startDate = Date.parse(dateInterval[0]);
                const endDate = Date.parse(dateInterval[1]);
                const diff_days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                if(diff_days <= 7) {
                    this.dateDataType = "visit_date_7"
                } else if(diff_days <= 30) {
                    this.dateDataType = "visit_date_30"
                } else {
                    this.dateDataType = "visit_date_custom"
                }
                this.date_interval = dateInterval;
                this.dateInterval = null;
            }

            if(dateInterval) {
                datas.begin_date = dateInterval[0];
                datas.end_date = dateInterval[1];
                this.date_interval = dateInterval;
            }

            // 访问次数
            const datas1 = {...datas, data_type: 4}
            this.handleRequest(datas1, res => {
                this.dataArr = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == datas1.data_type).valueSuffix
                    },
                    series: [{
                        name: this.getTypeName(datas1.data_type),
                        color: '#1890FF',
		                data: res.data || []
                    }]
                }
            })
            // 累计次数
            const datas2 = {...datas, data_type: 5}
            this.handleRequest(datas2, res => {
                if (res.data) {
                    getChartMin(res.data, this.dataArr2)
                    this.dataArr2 = Object.assign(this.dataArr2, {
                        valueSuffix: this.dataTypeArr.find(type => type.value == datas2.data_type).valueSuffix,
                        series: [{
                            name: this.getTypeName(datas2.data_type),
		                    data: res.data || []
                        }]
                    })
                }
            })
            // 访问人数
            const datas3 = {...datas, data_type: 1}
            this.handleRequest(datas3, res => {
                this.dataArr3 = Object.assign(this.dataArr3, {
                    valueSuffix: this.dataTypeArr.find(type => type.value == datas3.data_type).valueSuffix,
                    series: [{
                        name: this.getTypeName(datas3.data_type),
		                data: res.data || []
                    }]
                })
            })
            // 累计人数
            const datas4 = {...datas, data_type: 2}
            this.handleRequest(datas4, res => {
                if (res.data) {
                    const _data = [ ...res.data ]
                    _data.sort(compare(1, true)) // 升序排序
                    getChartMin(_data, this.dataArr4)
                    this.dataArr4 = {
                        ...this.dataArr4,
                        tooltip: {
                            valueSuffix: this.dataTypeArr.find(type => type.value == datas4.data_type).valueSuffix
                        },
                        series: [{
                            name: this.getTypeName(datas4.data_type),
                            color: '#FF8888',
		                    data: res.data || []
                        }]
                    }
                }
            })
            // 注册用户
            const datas5 = {...datas, data_type: 3}
            this.handleRequest(datas5, res => {
                this.dataArr5 = {
                    tooltip: {
                        valueSuffix: this.dataTypeArr.find(type => type.value == datas5.data_type).valueSuffix
                    },
                    series: [{
                        name: this.getTypeName(datas5.data_type),
                        color: '#47ECC0',
		                data: res.data || []
                    }]
                }
            })
            // 累计注册
            const datas6 = {...datas, data_type: 6}
            this.handleRequest(datas6, res => {
                // res.data.reverse()
                getChartMin(res.data, this.dataArr6)
                this.dataArr6 = Object.assign(this.dataArr6, {
                    valueSuffix: this.dataTypeArr.find(type => type.value == datas6.data_type).valueSuffix,
                    series: [{
                        name: this.getTypeName(datas6.data_type),
                        color: {
                            linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
                            stops: [
                                [0, 'rgb(24, 144, 255, 0.4)'],
                                [1, '#1890FF']
                            ],
                        },
		                data: res.data || []
                    }]
                })
                // 计算总值
                this.dataArr6.total = this.dataArr6.series[0].data.reduce((sum, item) => {
                    return sum + item[1];
                }, 0) || 0;
            })
        },
        handleRequest(params, cb = null) {
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=getMiniStatistic', {params})
            .then(res => {
                if(res.code == 1) {
                    typeof cb == 'function' && cb(res)
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        getTypeName(data_type) {
            return this.dataTypeArr.filter(item => item.value == data_type)[0].label;
        }
    }
}
</script>
<style scoped lang="scss">
    @import url('~@/common/scss/charts-public.scss');
    .container-box {
        width: 100%;
        height: calc(100% - 29px);
        box-sizing: border-box;
        padding: 0;
        position: relative;
        .charts-date-type {
            position: absolute;
            right: 0;
            top: -38px;
            z-index: 99;
        }
        .charts-container {
            box-shadow: none;
            width: calc(100% + 10px);
            height: 100%;
            overflow: hidden;
            margin: 0 -5px;
            padding-right: 3px;
            >.el-row {
                height: calc(33.333333% - 5px);
                >.el-col {
                    height: 100%;
                    .charts-box {
                         height: calc(100% - 15px);
                    }
                    &:first-child{padding-right: 3px;}
                    &:last-child{padding-left: 3px;}
                }
            }
        }
        .charts-box {
            background: #fff;
            box-shadow: 0px 0px 10px #ddd;
            box-sizing: border-box;
            margin: 15px 5px;
            position: relative;
            overflow: hidden;
            .charts-header {
                height: 48px;
                padding: 0 15px 4px;
                border: none;
                position: relative;
                > .charts-more {
                    position: absolute;
                    top: 12px;
                    right: 20px;
                    color: #1E7DF2;
                }
            }
            /deep/ .charts-content  {
                padding: 0 14px;
                height: 97%;
                &.charts-bar {
                    height: calc(97% - 10px)
                }
                .chart-search {
                    display: none!important;
                }
            }
        }
    }
</style>